var markerLayer;
var label;
var map;
var positionObj;

window.onload = function () {
    var tMap_script = document.createElement("script");
    tMap_script.type = "text/javascript";
    tMap_script.src = "https://map.qq.com/api/gljs?v=1.exp&key=3KNBZ-GWVKW-I3GRL-Y4QT3-Z5D3E-6AFON&libraries=service&callback=start";
    document.body.appendChild(tMap_script);


    //添加监视器
    document.getElementById('searchBtn').onclick = function () {
        console.log(document.getElementById('searchInput').value);
        // 调用腾讯地图API的Suggestion接口  
        var service = new TMap.service.Suggestion({
            regionFix: false
        });
        service.getSuggestions({
            keyword: document.getElementById('searchInput').value, // 搜索关键字  
        })
            .then(function (result) {
                var list = result.data;
                var suggestionList = document.getElementById('suggestionList');
                suggestionList.innerHTML = ''; // 清空之前的搜索建议列表  
                for (var i = 0; i < list.length; i++) {
                    var li = document.createElement('li');
                    li.textContent = list[i].title; // 显示建议的标题 
                    let index = i;
                    li.addEventListener('click', function () {
                        document.getElementById('searchInput').value = this.textContent;
                        console.log(list[index]);
                        map.setCenter(list[index].location)
                        markerLayer.add({
                            "id": list[index].id,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                            "styleId": 'myStyle',  //指定样式id
                            "position": list[index].location,  //点标记坐标位置
                            "properties": {//自定义属性
                                "title": list[index].title,
                            }
                        })
                        label.add({  //添加label
                            "id": list[index].id,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
                            "styleId": 'label',  //指定样式id
                            "position": list[index].location,  //点标记坐标位置
                            'content': list[index].title,
                        })
                        suggestionList.innerHTML = ''; // 点击建议时清空列表    
                        positionObj = list[index];
                    });
                    suggestionList.appendChild(li);
                }
            })
    };



    //确认定位
    document.getElementById('confirmBtn').onclick = function () {
        if (positionObj) {
            window.mapPage_API.savePositionObj(positionObj);
            setTimeout(function () {
                window.close();
            }, 500);
        }
    }
}

async function init() {
    positionObj = await window.mapPage_API.getPositionObj();
    document.getElementById('searchInput').value = await window.mapPage_API.getPlaceTitle();


    //如果点标记存在...
    if (positionObj) {
        map.setCenter(positionObj.location)
        markerLayer.add({
            "id": positionObj.id,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            "styleId": 'myStyle',  //指定样式id
            "position": new TMap.LatLng(positionObj.location.lat, positionObj.location.lng),  //点标记坐标位置
            "properties": {//自定义属性
                "title": positionObj.title,
            }
        })
        label.add({  //添加label
            "id": positionObj.id,   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
            "styleId": 'label',  //指定样式id
            "position": new TMap.LatLng(positionObj.location.lat, positionObj.location.lng),  //点标记坐标位置
            'content': positionObj.title,
        })
    }
}

function start() {

    var center = new TMap.LatLng(23.056084, 113.140666)
    //定义map变量，调用 TMap.Map() 构造函数创建地图
    map = new TMap.Map(document.getElementById('mapContainer'), {
        center: center,//设置地图中心点坐标
        zoom: 17.2,   //设置地图缩放级别
    });

    //点标记器
    markerLayer = new TMap.MultiMarker({
        map: map,  //指定地图容器
        // 样式定义
        styles: {
            //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
            "myStyle": new TMap.MarkerStyle({
                "width": 25,  // 点标记样式宽度（像素）
                "height": 35, // 点标记样式高度（像素）
                // "src": '../img/marker.png',  //图片路径
                //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
                "anchor": { x: 16, y: 32 }
            })
        }
    })


    //初始化label
    label = new TMap.MultiLabel({
        map: map, //设置折线图层显示到哪个地图实例中
        //文字标记样式
        styles: {
            'label': new TMap.LabelStyle({
                'color': '#F20779', //颜色属性
                'size': 20, //文字大小属性
                'offset': { x: 0, y: 15 }, //文字偏移属性单位为像素
                'angle': 0, //文字旋转属性
                'alignment': 'center', //文字水平对齐属性
                'verticalAlignment': 'middle' //文字垂直对齐属性
            })
        },
    });

    init();
}